<template>
<div class="editaddress-main">
    <el-dialog :visible.sync="dialogVisible" width="60%">
      <div slot="title" v-if="id" class="header">编辑地址</div>
      <div slot="title" v-else class="header">新增地址</div>
        <div>
            <el-form ref="form" :model="address" label-width="80px" :rules="rules">
                <el-row :gutter="10">
                    <el-col :span="16">
                        <el-form-item label="收货姓名" prop="name">
                            <el-input v-model="address.name" placeholder="请输入收货人姓名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                      <el-col :span="16">
                        <el-form-item label="收货电话" prop="phone">
                            <el-input v-model="address.phone" placeholder="请输入收货人电话" maxlength="11" minlength="11" show-word-limit></el-input>
                        </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="5">
                        <el-form-item label="收货地址" prop="addressName">
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top:10px;"> {{ address.addressName }}</div>
                    </el-col>
                    <el-col :span="7" style="text-align: right; margin-top: 10px">
                        <span @click="openAreaSelect" class="el-icon-arrow-right"></span>
                    </el-col>
                </el-row>

                <!-- 弹出框放地址列表 -->
                <el-drawer title="" :visible.sync="isShow" :modal="false" direction="btt" size="50%" class="drawer">
                    <van-area title="" :area-list="areaList" @confirm="selectArea"></van-area>
                </el-drawer>
                <!-- <van-area title="请选择收货地址" :area-list="areaList"  @change="selectArea" ></van-area> -->

                <el-form-item label="详细地址">
                    <el-input v-model="address.detailAddress" placeholder="请输入详细地址，具体到街道、小区"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码" prop="postCode">
                    <el-input v-model="address.postCode" placeholder="请输入邮政编码"></el-input>
                </el-form-item>
                <!-- 默认发货和收货 -->
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="默认发货">
                            <el-switch v-model="address.sendStatus" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="默认收货">
                            <el-switch v-model="address.receiveStatus" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="8" :offset="6">
                            <el-button type="primary" @click="cancel">重 置</el-button>
                    </el-col>
                    <el-col :span="8">
                            <el-button type="primary" @click="submitArea">提 交</el-button>
                    </el-col>
                </el-row>

            </el-form>
        </div>

    </el-dialog>
</div>
</template>

<script>
import areaList from "@/assets/arealist/index.js";

import {
    save,
    companyAddress,
    update,
} from "@/api/address/index";
export default {
    name: "EditAddress",
    components: {},
    data() {
        var checkPhone = (rule, value, callback) => {
            // var phone = value.replace(/\s/g, ""); //去除空格
            let regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
            if (!value) {
                return callback(new Error('手机号不能为空'));
            } else {
                // 验证手机号
                if (!regs.test(value)) {
                    return callback(new Error('请输入正确的手机号'))
                }
            }
        }

        return {
            address: {
                 name:'',
                city: "",
                cityCode: "", //地址编码
                province: "", //省份
                region: '', //区
                addressName: "", //地址全称
            },
            dialogVisible: false,
            areaList,
            value: "",
            isShow: false,
            selectAreaList: [],
            rules: {
                name: [{
                    required: true,
                    message: '请输入收货人姓名',
                    trigger: 'blur'
                }, ],
                //  正则验证电话号码
                phone: [{
                    validator: checkPhone,
                    trigger: 'blur',
                    required:true
                }],
                addressName: [{
                    required: true,
                    message: '请选择收货地址',
                    trigger: 'blur'
                }, ],
                postCode:[{  type: 'number', message: '→_→邮编必须为数值'},
                { min: 5, max: 6, message: '最大长度为6位', trigger: 'blur' }]

            },
            id: '',

        };
    },
    computed: {},
    created() {
      if(this.id){
        this.init();
      }
    },
    mounted() {},
    methods: {
        init(id) {
            this.id = id
            console.log(id);

            // 请求地址明细
            companyAddress(id).then(res => {
                console.log(res);
                if(res.success){
                  this.address=res.data.address
                }
            })

        },
        openAreaSelect() {
            this.isShow = true;
        },
        selectArea(val) {
            console.log(val);
            var str = "";
            var codeStr = "";
            val.forEach((el, index) => {
                // 显示的地区
                str = str + el.name;

                if (index == 1) {
                    // 城市
                    this.address.city = el.name;
                } else if (index == 0) {
                    // 省份
                    this.address.province = el.name;
                } else if (index == 2) {
                    this.address.region = el.name
                }
                // 地区编码
                codeStr = el.code + "," + codeStr;
            });

            // 显示在页面中的地址
            this.address.addressName = str

            this.address.cityCode = codeStr.substring(0, codeStr.length - 1);
            this.isShow = false;

            console.log(this.value, this.cityCode);
        },
        cancel(){
        //   this.dialogVisible=false
         this.$refs.address.resetFields();
         this.address={}
        },
        submitArea() {
            // console.log(this.address);
              this.$confirm('确定提交吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           if(this.id){
                    this.address.id=this.id
                    update(this.address).then(res=>{
                      console.log(res);
                      if(res.success){
                        this.$message.success('编辑成功了')
                        // this.dialogVisible=false
                       this.$router.push({name:"addressList"})

                      }else{
                        this.$message.error('sorry!!!编辑失败')
                      }
                    })
                  }else{
                    save(this.address).then(res=>{
                    console.log(res);
                      if(res.success){
                        this.$message.success('新增成功了')
                        // this.dialogVisible=false
                       this.$router.push({name:"addressList"})

                      }else{
                        this.$message.error('sorry!!!新增失败')
                      }
                    })
                  }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          });          
        });
            

            this.$refs.form.validate((valid) => {
                if (valid) {
                   console.log('通过了');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
           
        },
    },
};
</script>

<style lang="scss" scoped>
.editaddress-main {
    position: relative;

    .drawer {
        position: absolute;
        width: 100%;
    }
}

.header {
    font-weight: bolder;
    color: rgb(209, 50, 50);
    font-size: 22px;
}
</style>
